<template>
	<view class="pages">
		<view class="wrap">
			<view class="titleInfo">他说</view>
			<img v-if="showInfo" class="title" :src="getImgUrl('/img/divination/biaoti.png')" />
			<img class="content" :src="getImgUrl('/img/divination/neirong.png')" />
			<img v-if="showInfo"  class="divinationButton" :src="getImgUrl('/img/divination/anniu.png')" @tap="start" />
		</view>
		<view class="modal" v-if="status == '2' || status == '3'">
			<img class="modalGuike" :src="getImgUrl('/img/divination/guike.png')" @tap="handleGuike" />
			<view class="tongqianWrap">
				<img class="modalTongqian" :src="getImgUrl('/img/divination/tongqian.png')" />
				<img class="modalTongqian" :src="getImgUrl('/img/divination/tongqian.png')" />
				<img class="modalTongqian" :src="getImgUrl('/img/divination/tongqian.png')" />
			</view>
			<!-- 或轻摇手机 -->
			<view class="warn" v-if="status == '2' || status == '3' && count != 6">点击龟壳（{{count}}/6）</view>
			
			<view class="showInfoWrap" v-if="status == '3'">
				<view class="showInfo" v-for="(item,idx) in showArr" :key="idx">
					<view class="all" v-if="item.distance == '——'"></view>
					<view class="info" v-if="item.distance == '--'">
						<view class="half"></view>
						<view class="half"></view>
					</view>
					<!-- <view class="text">{{item.sense}}</view> -->
				</view>
				<view class="warn" v-if="count == '6'" @tap="divinationDetails">点击查看解析></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { imgBaseUrl } from '../../../utils/baseUrl'
	import { divinationAPI } from '../../../utils/api.js'
	import { showInfoFunc } from '../../../utils/common'
	export default {
		data(){
			return {
				showInfo: false,
				status:1, //1: 开始摇卦  2: 摇卦  3: 摇卦内容
				count:0,
				infoArr:[],
				showArr:[],
				random:[]
			}
		},
		onLoad(){
			this.initData();
			const a = showInfoFunc("排盘摇卦");
			console.log("a",a)
			this.showInfo = showInfoFunc("排盘摇卦") == undefined ? false : true
			console.log("showInfo",this.showInfo)
		},
		methods: {
			// 初始化数据
			async initData(){
				const res = await divinationAPI()
				console.log('res==============>',res.result.image)
				this.infoArr = res.result.image
				this.random = res.result.random
			},
			// 点击龟壳展示数据
			handleGuike(){
				this.status = 3
				if(this.count < 6){
					uni.vibrateShort({
						success: function () {
							console.log('success');
						}
					});
					this.count += 1
					let arr = this.showArr;
					arr.push(this.infoArr[this.count - 1])
					this.showArr = arr
				}
			},
			// 开始摇卦
			start(){
				this.status = 2
			},
			// 查看解析
			divinationDetails(){
				uni.navigateTo({
					url:`../../../subPackagesA/pages/divinationDetails/divinationDetails?random=${JSON.stringify(this.random)}&infoArr=${JSON.stringify(this.infoArr)}`
				})
			},
			// 图片渲染
			getImgUrl(image){
				return imgBaseUrl+image;
			},
		}
	}
	
</script>

<style scoped>
	.half{
		width: 48%;
		height: 52rpx;
		background-color: #ECCD9D;
	}
	.info{
		width: 80%;
		display: flex;
		justify-content: space-between;
	}
	.text{
		color: #ECCD9D;
	}
	.all{
		width: 80%;
		height: 52rpx;
		background-color: #ECCD9D;
	}
	.showInfo{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.showInfoWrap{
		margin-top: 40rpx;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.warn{
		margin-top: 20rpx;
		color: #fff;
	}
	.modalTongqian{
		width: 100rpx;
		height: 100rpx;
	}
	.tongqianWrap{
		margin-top: 40rpx;
		width: 60%;
		display: flex;
		justify-content: space-between;
	}
	.modalGuike{
		width: 60%;
		height: 300rpx;
		margin-top: 160rpx;
	}
	.modal{
		position: absolute;
		top:0;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: rgba(0, 0, 0, .8);
	}
	.titleInfo{
		margin-top: 100rpx;
	}
	.divinationButton{
		width: 76%;
		height: 98rpx;
		margin-top: 40rpx;
	}
	.content{
		width: 80%;
		height: 760rpx;
		margin-top: 40rpx;
	}
	.title{
		width: 76%;
		height: 200rpx;
	}
	.wrap{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.pages{
		width: 100%;
		height: 100vh;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/divination/beijing.png') no-repeat;
		background-size: 100% 100%;
	}
</style>